<template>
  <div>
    <van-search
      shape="round"
      placeholder="请输入搜索关键词"
      v-model="searchVal"
      @input="inputFn"
    />
    <!-- 搜索下容器 -->
    <div class="search_wrap" v-if="!searchList.length">
      <!-- 标题 -->
      <p class="hot_title">热门搜索</p>
      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 每个搜索关键词 -->
        <span
          v-for="item in hotSearch"
          :key="item.first"
          class="hot_item"
          @click="onclickHotItem(item)"
          > {{ item.first }} </span
        >
      </div>
    </div>

    <!-- 搜索结果 -->
    <div class="search_wrap" v-else>
      <!-- 标题 -->
      <p class="hot_title">最佳匹配</p>
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
       <MusicItem v-for="(item, i) in searchList"
        :name="item.name"
        :id="item.id"
        :authorName="item.ar[0].name"
        :key="i"  />
    </van-list>
    </div>
  </div>
</template>

<script>
import { getHotSearch, getSearchList } from '@/api/search.js'
import MusicItem from '@/components/MusicItem'
export default {
  data () {
    return {
      hotSearch: [],
      searchVal: '',
      searchList: [],
      limit: 10,
      timeId: null,
      list: [],
      loading: false,
      finished: false,
      offset: 0,
      page: 25
    }
  },

  created () {
    this.getHotSearch()
  },

  components: {
    MusicItem
  },

  methods: {
    async getHotSearch () {
      const res = await getHotSearch()
      this.hotSearch = res.data.result.hots
    },
    async onclickHotItem (obj) {
      this.page = 1
      this.searchVal = obj.first
      const res = await getSearchList({
        keywords: this.searchVal,
        limit: this.limit,
        offset: this.offset
      })
      console.log(res)
      this.searchList = res.data.result.songs
    },
    async onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.page++
      this.offset = (this.page - 1) * this.limit
      const res = await getSearchList({
        keywords: this.searchVal,
        limit: this.limit,
        offset: this.offset
      })
      console.log(res)
      if (res.data.result.songs) {
        this.searchList.push(...res.data.result.songs)
        this.loading = false
        return
      }
      this.finished = true
    },
    inputFn () {
      // 输入框值改变
      if (this.searchVal.length === 0) {
        // 搜索关键词如果没有, 就把搜索结果清空阻止网络请求发送(提前return)
        this.searchList = []
        return
      }
      if (this.timeId !== null) {
        clearTimeout(this.timeId)
      }
      this.timeId = setTimeout(async () => {
        const res = await getSearchList({
          keywords: this.searchVal,
          limit: this.limit,
          offset: this.offset
        })
        console.log(res)
        // 如果搜索结果响应数据没有songs字段-无数据
        if (res.data.result.songs === undefined) {
          this.searchList = []
          return
        }
        this.searchList = res.data.result.songs
      }, 800)
    }
  }
}
</script>

<style scoped lang='less'>
.search_wrap {
  padding: 0 10px;
}
/*热门搜索文字标题样式 */
.hot_title {
  font-size: 14px;
  color: #666;
}

.hot_item {
  font-size: 14px;
  padding: 5px 8px;
  border: 1px solid #d60d1d;
  border-radius: 15px;
  margin: 8px 0;
  display: inline-block;
  margin-right: 5px;
}
</style>
